<script setup lang="ts">
import APINotice from '@/api/notice'
import { ArrowDownBold } from '@element-plus/icons-vue'

const list = shallowRef<any[]>([])

function getNoticeList() {
    APINotice.getNoticeList().then(({ data }) => {
        list.value = data
    })
} getNoticeList()


const activeType = shallowRef<string>()

watch(list, (newValue) => {
    if (newValue.length != 0) {
        activeType.value = newValue[0].type
    }
})

const titleList = ref<any[]>([])

const loading = shallowRef<boolean>(false)
function getProtocolTitle() {
    loading.value = true
    APINotice.getNoticeTitle(activeType.value).then(({ data }) => {
        titleList.value = data
    }).finally(() => {
        loading.value = false
    })
}

watch(activeType, (newValue) => {
    if (newValue) {
        getProtocolTitle()
    }
})
const column = [{
    label: '关于心安元素',
    jumpLink: 'About'
}, {
    label: '心安元素活动',
    jumpLink: 'ActivityAll'
}, {
    label: '通知及公告',
    jumpLink: 'Notice',
    active: true
}, {
    label: '隐私政策及协议',
    jumpLink: 'Agreement'
}]
const isShow = shallowRef<any>(true)
</script>

<template>
    <div class="agreement">
        <div class="left-nav">
            <ColumnNav :column="column" />
            <Transition name="slide-fade">
                <div class="column-nav-my" v-show="isShow">
                    <div class="column-item" v-for="item in list"
                        :class="{ 'column-item-active': activeType == item.type }" @click="activeType = item.type">{{
                            item.title }}
                    </div>
                </div>
            </Transition>
        </div>
        <div class="collapse" v-loading="loading">
            <el-collapse v-if="titleList.length != 0">
                <el-collapse-item v-for="item in titleList" :key="item.id">
                    <template #title>
                        <div style="display: flex; width: 100%;justify-content: space-between;">
                            <div>{{ item.title }}</div>
                            <div>{{ item.update_time }}</div>
                        </div>
                    </template>
                    <div v-html="item.content"></div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<style>
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.4s;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    height: 0;
}

.slide-fade-leave-from,
.slide-fade-enter-to {
    height: 104px;
}
</style>

<style lang="scss" scoped>
.agreement {
    width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;

    .left-nav {
        float: left;
        margin-right: 50px;
        position: relative;

        .iconssds {
            position: absolute;
            top: 195px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0px 0px 3px 0px #606266;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            background-color: #ffffff;
        }
    }

    .column-nav-my {
        box-sizing: border-box;
        width: 200px;
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
        border-radius: 15px;
        padding: 0 8px;
        float: left;
        overflow: hidden;
        margin-top: 10px;
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

        .column-item {
            text-align: center;
            padding: 10px;
            border-radius: 15px;
            color: #606266;
            cursor: pointer;
            margin-bottom: 5px;

            &:first-child {
                margin-top: 8px;
            }

            &:last-child {
                margin-bottom: 8px;
            }

            &:hover {
                background-color: #eeeeee;
            }
        }

        .column-item-active {
            background-color: #e52129;
            color: #ffffff;
            font-family: 'SOURCEHANSANSCN-LIGHT';

            &:hover {
                background-color: #e52129;
            }
        }
    }

    .collapse {
        width: 1000px;
        min-height: 200px;
        float: left;
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

        &:deep(.el-collapse-item__header) {
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }
    }

    .cooperation-nav {
        width: 250px;
        height: 230px;
        border: 1px solid rgba(187, 187, 187, 1);
        padding-bottom: 40px;
        float: left;


        .cooperation-upload-nav-item {
            width: 250px;
            height: 40px;
            line-height: 23px;
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            transition: all .2s;
            cursor: pointer;

            .icon {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }

            &:hover {
                background-color: red;
                color: #ffffff;
            }
        }
    }
}
</style>
